<template>
  <div>
    <el-row v-for="(item1, index1) in data.children" :key="item1.id" :class="{'firstRoleTop': firstRoleTop(index1), 'firstRoleBottom': true, 'vccenter': true}">

      <!-- 一级权限 -->
      <el-col :span="5">
        <el-tag closable @close="removeRoleRight(data, item1.id)">{{item1.authName}}</el-tag>
        <i class="el-icon-caret-right"/>
      </el-col>

      <!-- 二级权限、三级权限 -->
      <el-col :span="19">

        <!-- 二级权限 -->
        <el-row v-for="(item2, index2) in item1.children" :key="item2.id" :class="{'secondTop': secondTop(index2), 'vccenter': true}">
          <el-col :span="7" >
              <el-tag type="success" closable @close="removeRoleRight(data, item2.id)">{{item2.authName}}</el-tag>
              <i class="el-icon-caret-right"/>
          </el-col>

          <!-- 三级权限 -->
          <el-col :span="12">
            <el-tag class="thirdRight"  v-for="(item3) in item2.children" :key="item3.id" type="warning" closable @close="removeRoleRight(data, item3.id)">{{item3.authName}}</el-tag>
          </el-col>

        </el-row>

      </el-col>

    </el-row>
  </div>
</template>

<script>
// 请求
import { delRemoveUserRight } from '@/network/roleControlRequest';

export default {
  props: {
    data: {
      type: [Array, Object]
    }
  },
  methods: {
    firstRoleTop(index) { // 不给第一项添加上划线
      return index === 0 ? 'firstRoleTop' : '';
    },
    secondTop(index) { // 不给二级权限第一项项添加上划线
      return index === 0 ? false : true;
    },
    async removeRoleRight(role, rightId) { // 根据权限id和角色id移除移除指定角色的权限
      const roleId = role.id; // 角色id
      // console.log(this.data);
      // console.log(role, roleId, rightId);
      
      // 确定删除操作
      const ret = await this.$confirm('此操作将永久删除该用户的权限, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      })
        .catch(err => err);
      // console.log(ret);
      if (ret !== 'confirm') {
        return this.$message('删除操作已取消');
      }
      const {meta, data} = await delRemoveUserRight(roleId, rightId);
      if (meta.status !== 200) {
        console.log(meta);
        return this.$message.error(meta.msg);
      }
      // console.log(meta, data);
      this.$bus.$emit('resetRole', {id: role.id, retData: data});
      return this.$message.success(meta.msg);
    }
  }
}
</script>

<style lang="scss" scoped>
/* 一级权限样式 */
  .el-row {
    padding: 10px;
    margin: 5px 0;
  }
  .firstRoleTop {
    border-top: 1px solid #eee;
  }
  .firstRoleBottom {
    border-bottom: 1px solid #eee;
  }

/* 二级权限 */
.secondTop {
  border-top: 1px solid #eee;
}

/* 三级权限 */
.thirdRight {
  margin: 8px 10px 5px 10px;
}

/* 居中样式 */
.vccenter {
  display: flex;
  align-items: center;
}
</style>